<template>
	<div id="app" class="layout">
		<Layout>
			<Header>
				<Menu theme="dark" mode="horizontal" active-name="1">
					<div class="layout-logo"><img width="100" src="../public/img/logo.jpg" /> </div>
					<div class="layout-nav">
						<MenuItem name="1">
						<Icon type="ios-keypad">
						</Icon>
						<router-link to="/">Home</router-link>
						</MenuItem>
						<MenuItem name="2">
						<Icon type="ios-analytics">
						</Icon>
						<router-link to="/about">API 文档</router-link>
						</MenuItem>
					</div>
					<Submenu name="3">
						<template slot="title">
							<Badge :count="3">
								<a href="#" class="demo-badge">qijunbo </a>
							</Badge>
						</template>

						<MenuItem name="3-1">个人信息</MenuItem>
						<MenuItem name="3-2">看不见</MenuItem>
						<MenuItem name="3-3">上去一层</MenuItem>

					</Submenu>
				</Menu>
			</Header>
			<Layout>

				<Sider hide-trigger :style="{background: '#fff'}">
					<Menu active-name="1-2" theme="light" width="auto" :open-names="['2']">
						<Submenu name="2">
							<template slot="title">
								<Icon type="ios-book"></Icon>
								我的图书馆
							</template>
							<MenuItem name="2-1">
							<Icon type="ios-search" />
							<router-link to="/search">文件索引</router-link>
							</MenuItem>
							<MenuItem name="2-2">
							<Icon type="ios-star-outline" />
							<router-link to="/home">我的收藏</router-link>
							</MenuItem>
							<MenuItem name="2-3">
							<Icon type="ios-clock" />
							<router-link to="/search">最近访问</router-link>
							</MenuItem>
						</Submenu>
						<Submenu name="1">
							
							<template slot="title">
								<Icon type="ios-folder" /> 文献管理 
								
							</template>

							<!--<MenuItem name="1-1">
							<Icon type="ios-document" />
							<router-link to="/home">文档</router-link>
							</MenuItem>
							<MenuItem name="1-2">
							<Icon type="ios-image" />
							<router-link to="/search">图片</router-link>
							</MenuItem>
							<MenuItem name="1-3">
							<Icon type="ios-musical-note" />
							<router-link to="/home">音乐</router-link>
							</MenuItem>
							<MenuItem name="1-4">
							<Icon type="logo-youtube" />
							<router-link to="/search">视频</router-link>
							</MenuItem>
							<MenuItem name="1-5">
							<router-link to="/home">其它</router-link>
							</MenuItem>-->
							
							<template  >
								<Tree :data="data5" :render="renderContent"></Tree>
							</template>

						</Submenu>
					</Menu>
				</Sider>

				<Layout :style="{padding: '0 24px 24px','z-index':'0'}">
					<Menu mode="horizontal" theme="light" active-name="33">
						<Row>
							<Col span="7">&nbsp;</Col>
							<Col span="16">
							<Input v-model="keyword" placeholder="请输入关键字..." clearable /> </Col>
							<Col span="1" align="center">
							<Icon type="ios-search" />
							</Col>
						</Row>
					</Menu>
					<Content>
						<router-view> </router-view>
					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				keyword: null,
				value2: false,
				data5: [
                    {
                        title: '文献管理',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                   /* h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '64px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })*/
                                ])
                            ]);
                        },
                        children: [
                            {
                                title: '文档',
                                expand: true,
                                children: []
                            },
                            {
                                title: '图片',
                                expand: true,
                                children: []
                            },
                            {
                                title: '音乐',
                                expand: true,
                                children: []
                            },
                            {
                                title: '视频',
                                expand: true,
                                children: []
                            },
                            {
                                title: '其他',
                                expand: true,
                                children: []
                            },
                        ]
                    }
                ],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
			}
		},
		methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.append(data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            append (data) {
                const children = data.children || [];
                children.push({
                    title: 'appended node',
                    expand: true
                });
                this.$set(data, 'children', children);
            },
            remove (root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            }
        }
	}
</script>

<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-logo {
		width: 100px;
		height: 30px;
		background: #5b6270;
		border-radius: 3px;
		float: left;
		position: relative;
		top: 15px;
		left: 20px;
	}
	
	.layout-nav {
		width: 420px;
		margin: 0 auto;
		margin-right: 20px;
	}
	
	.demo-badge {
		width: 42px;
		height: 42px;
		background: #eee;
		border-radius: 6px;
		display: inline-block;
	}
</style>